import React, {PureComponent} from "react"
import "./index.less"
import cs from "classnames"
import {appContext} from "context/app-context"
import {read} from "zr-react-toolbox"
import {HOST} from "../../../../shared/project-config"
import AvatarLoader from "libs/avatar-loader"


@appContext
class Profile extends PureComponent {

  render() {

    const {context} = this.props

    const userNameClazz = cs({
      "profile-user-info": true,
      hidden: context.menuCollapsed,
    })

    const userInfoClazz = cs({
      "profile-user-info": true,
      "details": true,
      hidden: context.menuCollapsed,
      expended: !context.menuCollapsed
    })

    return (
      <div className={cs("zr-profile", {collapsed: context.menuCollapsed})}>
        <div className="logo-image">
          <AvatarLoader src={`${read(context,'userInfo.avatar')}`}/>
        </div>
        <div className={userNameClazz}>
          {read(context,'userInfo.displayName')}
        </div>
        <div className={userInfoClazz}>
					<span className={cs("user-role", {hidden: context.menuCollapsed})}>
						{(read(context, 'userInfo.roles') || []).filter(i => i.code !== 'BASE_USER').map(i => i.name).join(' ')}
					</span>
        </div>
      </div>
    )
  }
}

export default Profile
